<template>
	
    <div>
        <!-- <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item >
                    <i class="el-icon-pie-chart"></i> 数据呈现图表
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div> -->
        <!-- <div class="container"> -->
			<div>
				<el-row :gutter="20">
					<el-col :span="5">
						<div class="grid-content bg-purple">实时土壤湿度：{{ moisture}}%</div>
					</el-col>
					<!-- <el-col :span="8">
						<div class="grid-content bg-red">最新异常数据：{{abnormal}}% 时间点为: {{time}}</div>
					</el-col> -->
				</el-row>
			</div>
			<div style="height: 450px;" ref="chartContainer"></div>
		   <!-- <div class="ave-box">实时土壤湿度：{{ moisture}} </div> -->
            <!-- <div class="schart-box"> -->
				<!-- <div class="ms-title">{{ count }}</div> -->
				 <!-- <el-button type="primary" @click="beforeDestroy()">停止计时器</el-button>
				<el-button type="primary" @click="Update()">刷新</el-button> -->
                <!-- <div class="content-title">line图</div> -->
                <!-- <schart class="schart" canvasId="line" :options="options1"></schart>
            </div> -->
			<div>
				<el-row :gutter="20">
					<el-col :span="5">
						<div class="grid-content bg-purple">平均土壤湿度： {{ average}}%</div>
					</el-col>
					<el-col :span="10">
						<div class="grid-content bg-purple">根据过去十组数据预测下一个土壤湿度： {{ nxtmois}}%</div>
					</el-col>
				</el-row>
			</div>

        </div>

</template>

<script>
import { gettemhum,getmoisnext} from '../../api/index';
import Schart from 'vue-schart';
import * as echarts from 'echarts';
export default {
   // name: 'basecharts',
    components: {
        Schart
    },
    data() {
        return {
			nxtmois:'',
			chartContainer:null,
			time:'xx:xx:xx',
			abnormal:'--',
			average:0,
			moisture:'',
			 count:0,
			 option: {
			 	color:'green',
			 	title: {
			 		text: '土壤湿度数据图表'
			 	},
			 	tooltip: {
			 		trigger: 'axis'
			 	},
			 	// legend: {},
			 
			 	xAxis: {
			 		type: 'category',
			 		boundaryGap: false,
			 		data: [0,0,0,0,0,0,0,0,0,0]
			 	},
			 	yAxis: {
			 		type: 'value',
			 		axisLabel: {
			 			formatter: '{value} Lux'
			 		}
			 	},
			 	series: [{
			 			name: 'Highest',
			 			type: 'line',
			 			data: [0,0,0,0,0,0,0,0,0,0],
			 			markPoint: {
			 				data: [{
			 						type: 'max',
			 						name: 'Max'
			 					},
			 					{
			 						type: 'min',
			 						name: 'Min'
			 					}
			 				]
			 			},
			 			markLine: {
			 				data: [{
			 					type: 'average',
			 					name: 'Avg'
			 				}]
			 			}
			 		},
			 		
			 	]
			 },


        };
    },
	created() {
		// this.getTH();
		// this.getAve();
		// 在组件创建时启动轮询
		this.startPolling();
		    
    },
	beforeDestroy() {
    // 在组件销毁前停止轮询
    this.stopPolling();
	},
	mounted() {
		this.getTH();
		this.init();
		this.getNXTmois();
	},
	methods:{
		//进行信息预测，获取下一个数据
		getNXTmois(){
			getmoisnext().then(res=>{
				console.log(res);
				 this.nxtmois=res.predict;
			})
		},
		init() {
			this.chartContainer = echarts.init(this.$refs.chartContainer);
		
			this.chartContainer.setOption(this.option);
			// console.log(this.echart1);
		},
		beforeDestroy() {
			// 在组件销毁前停止轮询
			this.stopPolling();
		},
		startPolling() {
			// 使用定时器设置轮询间隔
			this.timer = setInterval(() => {
				this.fetchData();
			}, 10000); // 间隔时间为 1 min
		},
		stopPolling() {
			// 停止定时器
			clearInterval(this.timer);
		},
		fetchData() {
			// 向服务器发送请求，获取数据
			this.getTH();
			// this.getAve();
			setTimeout(() => {
				this.count++;
				// 每次请求成功后增加计数
			}, 1000); // 模拟请求延迟时间为 0.5 秒
		},

		//获取湿度相关数据
		getTH() {
			//获取实时数据
			gettemhum().then(res => {
				
				//与后端传输
				//进行条件判断
				if(res.moisCondtion==2){
					// this.$message.error('土壤湿度过高')
					this.$message({
						duration:10000,	
						message:'土壤湿度过高',
						type:'error',
					});
				}else if(res.moisCondtion==0){
					// this.$message.error('土壤湿度过低')
					this.$message({
						duration:10000,	
						message:'土壤湿度过低',
						type:'error',
					});
				}else if(res.moisCondtion==3){
					// this.$message({
					// 	duration:10000,	
					// 	message:'异常了，请注意硬件设备',
					// 	type:'error',
					// });
					this.abnormal=res.moisture[9]
					this.time=res.time[9]
				}
				// console.log(res.moisture);
				// this.options1.datasets[0].data=res.moisture;
				// this.options1.labels=res.time;
				//赋值
				this.option.xAxis.data=res.time;
				this.option.series[0].data=res.moisture;
				//渲染
				this.chartContainer.setOption(this.option);
				this.moisture = res.moisture[9];
				// console.log(res.moisture[9]);
				var sum= res.moisture[0] + res.moisture[1] + res.moisture[2] + res.moisture[3] + res
					.moisture[4] + res.moisture[5] + res.moisture[6] + res.moisture[7] + res.moisture[8] +
					res.moisture[9];
				var ave=sum/10;
				this.average=ave;
				//console.log(res);
				 });
	   
		},
	
	},
};
</script>

<style scoped>
	.el-row {
		margin-bottom: 20px;
	
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 4px;
	}
	
	.bg-purple-dark {
		background: #99a9bf;
	}
	
	.bg-purple {
		background: #a0d175;
	}
	
	.bg-red{
		background: #ec4042;
	}
	
	.bg-purple-light {
		background: #e5e9f2;
	}
	
	.grid-content {
		display: flex;
		align-items: center;
		justify-content: center;
		/* text-align: center; */
		color: #ffffff;
		border-radius: 4px;
		min-height: 36px;
	}
	
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
	
	.schart-box {
		display: inline-block;
		margin: 20px;
	}
	
	.schart {
		width: 800px;
		height: 400px;
	}
	
	.content-title {
		clear: both;
		font-weight: 400;
		line-height: 50px;
		margin: 10px 0;
		font-size: 22px;
		color: #1f2f3d;
	}
	
	.ave-box {
	
		border-radius: 5px;
		background: rgba(255, 255, 255, 0.3);
		border-width: thin;
		border-style: solid;
		width: 20%;
		high: 30%;
	}
</style>